<script setup lang="tsx">
import { useForm } from '@/hooks/web/useForm'
import { PropType, computed, watch, ref, unref, nextTick } from 'vue'
import { useValidator } from '@/hooks/web/useValidator'
import { useI18n } from '@/hooks/web/useI18n'
import {
  ElSkeleton,
  ElRow,
  ElCol,
  ElFormItem,
  ElForm,
  ElCheckbox,
  ElInputNumber,
  ElTree,
  ElSelect,
  ElOption,
  ElInput,
  ElTabs,
  ElTabPane,
  ElTable,
  ElTableColumn,
  ElMessage
} from 'element-plus'
import { updateFieldByIdApi } from '@/api/generate'
import { Edit } from '@element-plus/icons-vue'
import { saveGenerate, updateGenerate, selectModelById, checkFieldExistApi } from '@/api/generate'
import { BaseButton } from '@/components/Button'
import SelectOption from './SelectOption.vue'
const { t } = useI18n()

const { required } = useValidator()

const props = defineProps({
  currentRow: {
    type: Object as PropType<any>,
    default: () => null
  }
})

const resetForm = () => {
  //resetFields存在bug，使用ref代替
  formSchema.value = restFormSchema.value
}
const restFormSchema = ref({
  tableName: '',
  tableComment: '',
  fieldList: [
    {
      fieldName: 'id',
      fieldType: 'string',
      length: 50,
      fieldPoint: 0,
      defaultValue: '',
      nullable: '0',
      isRequired: '0',
      remarks: '主键',
      isUnique: '0',
      primaryKey: '1',
      sortOrder: 1,
      isQuery: '0',
      searchModule: 'Input',
      formModule: 'Input',
      columnWidth: '',
      searchSpan: '',
      isForm: '0',
      isShow: '0'
    },
    {
      fieldName: 'create_by',
      fieldType: 'string',
      length: 50,
      fieldPoint: 0,
      defaultValue: '',
      nullable: '1',
      isRequired: '0',
      remarks: '创建人',
      isUnique: '0',
      primaryKey: '0',
      sortOrder: 2,
      isQuery: '0',
      searchModule: 'Input',
      formModule: 'Input',
      columnWidth: '',
      searchSpan: '',
      isForm: '0',
      isShow: '0'
    },
    {
      fieldName: 'create_time',
      fieldType: 'date',
      length: 0,
      fieldPoint: 0,
      defaultValue: '',
      nullable: '1',
      isRequired: '0',
      remarks: '创建时间',
      isUnique: '0',
      primaryKey: '0',
      sortOrder: 3,
      isQuery: '0',
      searchModule: 'Input',
      formModule: 'Input',
      columnWidth: '',
      searchSpan: '',
      isForm: '0',
      isShow: '0'
    },
    {
      fieldName: 'update_by',
      fieldType: 'string',
      length: 50,
      fieldPoint: 0,
      defaultValue: '',
      nullable: '1',
      isRequired: '0',
      remarks: '更新人',
      isUnique: '0',
      primaryKey: '0',
      sortOrder: 4,
      isQuery: '0',
      searchModule: 'Input',
      formModule: 'Input',
      columnWidth: '',
      searchSpan: '',
      isForm: '0',
      isShow: '0'
    },
    {
      fieldName: 'update_time',
      fieldType: 'date',
      length: 0,
      fieldPoint: 0,
      defaultValue: '',
      nullable: '1',
      isRequired: '0',
      remarks: '更新时间',
      isUnique: '0',
      primaryKey: '0',
      sortOrder: 5,
      isQuery: '0',
      searchModule: 'Input',
      formModule: 'Input',
      columnWidth: '',
      searchSpan: '',
      isForm: '0',
      isShow: '0'
    },
    {
      fieldName: '',
      fieldType: 'string',
      length: 128,
      fieldPoint: 0,
      defaultValue: '',
      nullable: '1',
      isRequired: '0',
      remarks: '',
      isUnique: '0',
      primaryKey: '0',
      sortOrder: 6,
      isQuery: '0',
      searchModule: 'Input',
      formModule: 'Input',
      columnWidth: '',
      searchSpan: '',
      isForm: '1',
      isShow: '1'
    }
  ]
})

const treeRef = ref<typeof ElTree>()
const formSchema = ref({
  tableName: '',
  tableComment: '',
  fieldList: [
    {
      fieldName: 'id',
      fieldType: 'string',
      length: 50,
      fieldPoint: 0,
      defaultValue: '',
      nullable: '0',
      isRequired: '0',
      remarks: '主键',
      isUnique: '0',
      primaryKey: '1',
      sortOrder: 1,
      isQuery: '0',
      searchModule: 'Input',
      formModule: 'Input',
      columnWidth: '',
      searchSpan: '',
      isForm: '0',
      isShow: '0'
    },
    {
      fieldName: 'create_by',
      fieldType: 'string',
      length: 50,
      fieldPoint: 0,
      defaultValue: '',
      nullable: '1',
      isRequired: '0',
      remarks: '创建人',
      isUnique: '0',
      primaryKey: '0',
      sortOrder: 2,
      isQuery: '0',
      searchModule: 'Input',
      formModule: 'Input',
      columnWidth: '',
      searchSpan: '',
      isForm: '0',
      isShow: '0'
    },
    {
      fieldName: 'create_time',
      fieldType: 'date',
      length: 0,
      fieldPoint: 0,
      defaultValue: '',
      nullable: '1',
      isRequired: '0',
      remarks: '创建时间',
      isUnique: '0',
      primaryKey: '0',
      sortOrder: 3,
      isQuery: '0',
      searchModule: 'Input',
      formModule: 'Input',
      columnWidth: '',
      searchSpan: '',
      isForm: '0',
      isShow: '0'
    },
    {
      fieldName: 'update_by',
      fieldType: 'string',
      length: 50,
      fieldPoint: 0,
      defaultValue: '',
      nullable: '1',
      isRequired: '0',
      remarks: '更新人',
      isUnique: '0',
      primaryKey: '0',
      sortOrder: 4,
      isQuery: '0',
      searchModule: 'Input',
      formModule: 'Input',
      columnWidth: '',
      searchSpan: '',
      isForm: '0',
      isShow: '0'
    },
    {
      fieldName: 'update_time',
      fieldType: 'date',
      length: 0,
      fieldPoint: 0,
      defaultValue: '',
      nullable: '1',
      isRequired: '0',
      remarks: '更新时间',
      isUnique: '0',
      primaryKey: '0',
      sortOrder: 5,
      isQuery: '0',
      searchModule: 'Input',
      formModule: 'Input',
      columnWidth: '',
      searchSpan: '',
      isForm: '0',
      isShow: '0'
    },
    {
      fieldName: '',
      fieldType: 'string',
      length: 128,
      fieldPoint: 0,
      defaultValue: '',
      nullable: '1',
      isRequired: '0',
      remarks: '',
      isUnique: '0',
      primaryKey: '0',
      sortOrder: 6,
      isQuery: '0',
      searchModule: 'Input',
      formModule: 'Input',
      columnWidth: '',
      searchSpan: '',
      isForm: '1',
      isShow: '1'
    }
  ]
})
const moduleVisible = ref(false)
const selectRow = ref()
/**
 * 打开配置窗口
 * @param type
 * @param scope
 */
const moduleConfigVisible = async (type, scope) => {
  const res = await checkFieldExistApi({
    modelId: scope.row.modelId,
    fieldName: scope.row.fieldName
  })
  if (res.success) {
    if (!res.result) {
      ElMessage.error('请先保存模型配置')
      return
    }
  }
  selectRow.value = res.result
  moduleVisible.value = true
}
/**
 * 保存组件配置
 */
const saveModule = async () => {
  selectRow.value.formModuleOption = JSON.stringify(selectRow.value.formModuleOption)
  const res = updateFieldByIdApi(selectRow.value)
  if ((await res).success) {
    ElMessage.success((await res).message)
  }
  moduleVisible.value = false
}
const currentTreeData = ref()
const nodeClick = (treeData: any) => {
  currentTreeData.value = treeData
}

const rules = computed(() => {
  const dynamicRules = {
    tableName: [
      { required: true, message: '表名称必填' },
      {
        pattern: /^[a-zA-Z][a-zA-Z0-9_]*$/,
        message: '只能由字母、数字、下划线组成，必须以字母开头，不能以单个字母加下划线开头'
      }
    ],
    tableComment: [required()],
    status: [required()]
  }
  formSchema.value.fieldList.forEach((item, index) => {
    dynamicRules[`fieldList[${index}].fieldName`] = [
      { required: true, message: t('字段名称不能为空'), trigger: 'blur' },
      {
        pattern: /^[a-zA-Z][a-zA-Z0-9_]*$/,
        message: '由字母、数字、下划线组成',
        trigger: 'blur'
      }
    ]
  })
  return dynamicRules
})

const { formRegister, formMethods } = useForm()
const { setValues, getFormData, getElFormExpose } = formMethods
const treeData = ref([])

const submit = async () => {
  clearNullData()
  console.log('data', formSchema.value)
  const formData = await formRef.value.validate(async (valid) => {
    if (valid) {
      formSchema.value.fieldList.forEach((item) => {
        if (typeof item.formModuleOption === 'object') {
          item.formModuleOption = JSON.stringify(item.formModuleOption)
        }
      })
      const res = await saveGenerate(formSchema.value)
      if (!res.success) {
        return
      }
      resetForm()
      return formSchema.value
    }
  })
  return formData
}
const updateData = async () => {
  clearNullData()
  const formData = await formRef.value.validate(async (valid) => {
    if (valid) {
      formSchema.value.fieldList.forEach((item) => {
        if (typeof item.formModuleOption === 'object') {
          item.formModuleOption = JSON.stringify(item.formModuleOption)
        }
      })
      const res = await updateGenerate(formSchema.value)
      if (!res.success) {
        return
      }
      resetForm()
      return formSchema.value
    }
  })
  return formData
}
const clearNullData = () => {
  formSchema.value.fieldList = formSchema.value.fieldList.filter((item) => item.fieldName !== '')
}
const formModuleOptions = [
  {
    value: 'Input',
    label: '文本框'
  },
  {
    value: 'DatePicker',
    label: '日期选择器'
  },
  {
    value: 'Select',
    label: '选择器'
  }
]
const fieldTypeOptions = [
  {
    value: 'string',
    label: '文本'
  },
  {
    value: 'int',
    label: '整数'
  },
  {
    value: 'double',
    label: '浮点型'
  },
  {
    value: 'BigDecimal',
    label: '大数据引用类型'
  },
  {
    value: 'text',
    label: '大文本'
  },
  {
    value: 'date',
    label: '日期'
  }
]

const checkCurrentRow = ref()
const singleTableRef = ref<InstanceType<typeof ElTable>>()

const setCurrent = (row) => {
  singleTableRef.value!.setCurrentRow(row)
}
const handleCurrentChange = (val) => {
  checkCurrentRow.value = val
  addField()
  verifyBtnDisabled()
}
const addField = () => {
  const allDatesExist = formSchema.value.fieldList.every((item) => item.fieldName)
  if (allDatesExist) {
    const newData = {
      fieldName: '',
      fieldType: 'string',
      length: 128,
      fieldPoint: 0,
      defaultValue: '',
      nullable: '1',
      isRequired: '0',
      remarks: '',
      isUnique: '0',
      primaryKey: '0',
      sortOrder: formSchema.value.fieldList.length + 1,
      isQuery: '0',
      searchModule: 'Input',
      formModule: 'Input',
      columnWidth: '',
      searchSpan: '',
      isForm: '1',
      isShow: '1'
    }
    formSchema.value.fieldList.push(newData)
  }
}
const moveUp = () => {
  const index = formSchema.value.fieldList.findIndex(
    (item) => item.fieldName === checkCurrentRow.value.fieldName
  )
  if (index > 0) {
    const temp = formSchema.value.fieldList[index - 1]
    formSchema.value.fieldList[index - 1] = formSchema.value.fieldList[index]
    formSchema.value.fieldList[index] = temp
    console.log('tableDat1a', formSchema.value.fieldList)
    formSchema.value.fieldList.forEach((item, idx) => {
      item.sortOrder = idx + 1
    })
  }
  formSchema.value.fieldList.sort((a, b) => a.sortOrder - b.sortOrder)
  console.log('tableData', formSchema.value.fieldList)
}

const moveDown = () => {
  const index = formSchema.value.fieldList.findIndex(
    (item) => item.fieldName === checkCurrentRow.value.fieldName
  )
  if (index < formSchema.value.fieldList.length - 1) {
    const temp = formSchema.value.fieldList[index + 1]
    formSchema.value.fieldList[index + 1] = formSchema.value.fieldList[index]
    formSchema.value.fieldList[index] = temp
    formSchema.value.fieldList.forEach((item, idx) => {
      item.sortOrder = idx + 1
    })
  }
  formSchema.value.fieldList.sort((a, b) => a.sortOrder - b.sortOrder)
}
const delField = () => {
  if (checkCurrentRow.value) {
    const index = formSchema.value.fieldList.findIndex(
      (item) => item.fieldName === checkCurrentRow.value.fieldName
    )
    if (index !== -1) {
      formSchema.value.fieldList.splice(index, 1)
      formSchema.value.fieldList.forEach((item, idx) => {
        item.sortOrder = idx + 1
      })
    }
  }
}
const verifyDisabled = (row) => {
  const disabledFields = ['id', 'create_by', 'create_time', 'update_by', 'update_time']
  return disabledFields.includes(row.fieldName)
}

const verifyBtnDisabledFlag = ref(false)

const verifyBtnDisabled = () => {
  if (!checkCurrentRow.value) {
    verifyBtnDisabledFlag.value = true
  } else {
    const disabledFields = ['id', 'create_by', 'create_time', 'update_by', 'update_time']
    verifyBtnDisabledFlag.value = disabledFields.includes(checkCurrentRow.value.fieldName)
  }
}

const formRef = ref(null)
const triggerValidation = (index) => {
  formRef.value.validateField(`fieldList[${index}].fieldName`)
}
const fieldTypeChange = (row) => {
  if (row.fieldType === 'date' || row.fieldType === 'int' || row.fieldType === 'text') {
    row.length = 0
  }
}
watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return
    nextTick(() => {
      setFormValue(currentRow)
    })
  },
  {
    deep: true,
    immediate: true
  }
)
const dataLoadFlag = ref(false)
const setFormValue = async (row) => {
  dataLoadFlag.value = true
  const res = await selectModelById(row.id)
  if (res.success) {
    formSchema.value = res.result
    dataLoadFlag.value = false
  }
}

defineExpose({
  setFormValue,
  resetForm,
  submit,
  updateData
})
</script>

<template>
  <ElForm :rules="rules" :model="formSchema" ref="formRef">
    <ElRow :gutter="20">
      <ElCol :span="11">
        <ElFormItem :label="t('model.tableName')" prop="tableName">
          <ElInput v-model="formSchema.tableName" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="11">
        <ElFormItem :label="t('model.tableComment')" prop="tableComment">
          <ElInput v-model="formSchema.tableComment" />
        </ElFormItem>
      </ElCol>
    </ElRow>
    <ElTabs @tab-change="clearNullData">
      <ElTabPane :label="t('model.fieldConfig')">
        <BaseButton type="danger" :disabled="verifyBtnDisabledFlag" @click="delField">
          {{ t('model.delField') }}
        </BaseButton>
        <BaseButton :disabled="!checkCurrentRow" @click="moveUp">
          {{ t('model.moveUp') }}
        </BaseButton>
        <BaseButton :disabled="!checkCurrentRow" @click="moveDown">
          {{ t('model.moveDown') }}
        </BaseButton>
        <ElSkeleton
          style="width: 100%; height: 600px; margin-top: 20px"
          :loading="dataLoadFlag"
          :rows="15"
        />
        <ElTable
          v-show="!dataLoadFlag"
          ref="singleTableRef"
          highlight-current-row
          :data="formSchema.fieldList"
          header-row-class-name="table-background"
          style="width: 100%; height: 600px; margin-top: 20px"
          :border="true"
          @current-change="handleCurrentChange"
        >
          <ElTableColumn
            label="序号"
            type="index"
            width="70"
            align="center"
            :sortable="true"
            :sort-method="sortOrder"
          />
          <ElTableColumn prop="fieldName" label="名称">
            <template #default="scope">
              <ElFormItem :prop="`fieldList[${scope.$index}].fieldName`">
                <ElInput
                  :disabled="verifyDisabled(scope.row)"
                  @click="addField"
                  @blur="triggerValidation(scope.$index)"
                  v-model="scope.row.fieldName"
                  placeholder=""
                />
              </ElFormItem>
            </template>
          </ElTableColumn>
          <ElTableColumn prop="remarks" label="备注">
            <template #default="scope">
              <ElFormItem :prop="`fieldList[${scope.$index}].remarks`">
                <ElInput
                  :disabled="verifyDisabled(scope.row)"
                  @click="addField"
                  v-model="scope.row.remarks"
                  placeholder=""
                />
              </ElFormItem>
            </template>
          </ElTableColumn>
          <ElTableColumn prop="fieldType" label="类型">
            <template #default="scope">
              <ElFormItem :prop="`fieldList[${scope.$index}].fieldType`">
                <ElSelect
                  @change="fieldTypeChange(scope.row)"
                  :disabled="verifyDisabled(scope.row)"
                  v-model="scope.row.fieldType"
                  placeholder="Select"
                  size="large"
                >
                  <ElOption
                    v-for="item in fieldTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </ElSelect>
              </ElFormItem>
            </template>
          </ElTableColumn>
          <ElTableColumn prop="length" label="长度">
            <template #default="scope">
              <ElFormItem :prop="`fieldList[${scope.$index}].length`">
                <ElInputNumber
                  :max="8000"
                  :min="0"
                  :disabled="verifyDisabled(scope.row)"
                  v-model="scope.row.length"
                  step="1"
                  :step-strictly="true"
                  controls-position="right"
                />
              </ElFormItem>
            </template>
          </ElTableColumn>
          <ElTableColumn prop="fieldPoint" label="小数点">
            <template #default="scope">
              <ElFormItem :prop="`fieldList[${scope.$index}].fieldPoint`">
                <ElInputNumber
                  :max="8"
                  :min="0"
                  :disabled="verifyDisabled(scope.row)"
                  v-model="scope.row.fieldPoint"
                  step="1"
                  :step-strictly="true"
                  controls-position="right"
                />
              </ElFormItem>
            </template>
          </ElTableColumn>
          <ElTableColumn prop="defaultValue" label="默认值">
            <template #default="scope">
              <ElFormItem :prop="`fieldList[${scope.$index}].defaultValue`">
                <ElInput
                  :disabled="verifyDisabled(scope.row)"
                  v-model="scope.row.defaultValue"
                  placeholder=""
                />
              </ElFormItem>
            </template>
          </ElTableColumn>
          <ElTableColumn prop="primaryKey" label="是否主键">
            <template #default="scope">
              <ElFormItem :prop="`fieldList[${scope.$index}].primaryKey`">
                <ElCheckbox
                  :disabled="verifyDisabled(scope.row)"
                  v-model="scope.row.primaryKey"
                  :true-value="'1'"
                  :false-value="'0'"
                  size="large"
                />
              </ElFormItem>
            </template>
          </ElTableColumn>
          <ElTableColumn prop="nullable" label="可为空">
            <template #default="scope">
              <ElFormItem :prop="`fieldList[${scope.$index}].nullable`">
                <ElCheckbox
                  :disabled="verifyDisabled(scope.row)"
                  v-model="scope.row.nullable"
                  :true-value="'1'"
                  :false-value="'0'"
                  size="large"
                />
              </ElFormItem>
            </template>
          </ElTableColumn>
          <ElTableColumn prop="isUnique" label="是否唯一">
            <template #default="scope">
              <ElFormItem :prop="`fieldList[${scope.$index}].isUnique`">
                <ElCheckbox
                  :disabled="verifyDisabled(scope.row)"
                  v-model="scope.row.isUnique"
                  :true-value="'1'"
                  :false-value="'0'"
                  size="large"
                />
              </ElFormItem>
            </template>
          </ElTableColumn>
        </ElTable>
      </ElTabPane>
      <ElTabPane label="表单配置">
        <ElTable
          v-show="!dataLoadFlag"
          ref="singleTableRef"
          highlight-current-row
          :data="formSchema.fieldList"
          header-row-class-name="table-background"
          style="width: 100%; height: 600px; margin-top: 20px"
          :border="true"
        >
          <ElTableColumn
            label="序号"
            type="index"
            width="70"
            align="center"
            :sortable="true"
            :sort-method="sortOrder"
          />
          <ElTableColumn prop="fieldName" label="名称">
            <template #default="scope">
              <ElFormItem :prop="`fieldList[${scope.$index}].fieldName`">
                <ElInput
                  :disabled="true"
                  @blur="triggerValidation(scope.$index)"
                  v-model="scope.row.fieldName"
                  placeholder=""
                />
              </ElFormItem>
            </template>
          </ElTableColumn>
          <ElTableColumn prop="remarks" label="备注">
            <template #default="scope">
              <ElFormItem :prop="`fieldList[${scope.$index}].remarks`">
                <ElInput :disabled="true" v-model="scope.row.remarks" placeholder="" />
              </ElFormItem>
            </template>
          </ElTableColumn>
          <ElTableColumn prop="formModule" label="表单组件">
            <template #default="scope">
              <ElFormItem :prop="`fieldList[${scope.$index}].formModule`">
                <ElSelect
                  :disabled="verifyDisabled(scope.row)"
                  v-model="scope.row.formModule"
                  placeholder="Select"
                  size="large"
                >
                  <ElOption
                    v-for="item in formModuleOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </ElSelect>
              </ElFormItem>
            </template>
          </ElTableColumn>
          <ElTableColumn prop="isForm" label="配置">
            <template #default="scope">
              <ElFormItem :prop="`fieldList[${scope.$index}].isForm`" label-width="125px">
                <el-button
                  v-if="scope.row.formModule === 'Select'"
                  :icon="Edit"
                  circle
                  @click="moduleConfigVisible('Select', scope)"
                />
              </ElFormItem>
            </template>
          </ElTableColumn>
          <ElTableColumn prop="isForm" label="是否为表单字段">
            <template #default="scope">
              <ElFormItem :prop="`fieldList[${scope.$index}].isForm`" label-width="125px">
                <ElCheckbox
                  :disabled="verifyDisabled(scope.row)"
                  v-model="scope.row.isForm"
                  :true-value="'1'"
                  :false-value="'0'"
                  size="large"
                />
              </ElFormItem>
            </template>
          </ElTableColumn>
          <ElTableColumn prop="isRequired" label="必填">
            <template #default="scope">
              <ElFormItem :prop="`fieldList[${scope.$index}].isRequired`" label-width="125px">
                <ElCheckbox
                  :disabled="verifyDisabled(scope.row)"
                  v-model="scope.row.isRequired"
                  :true-value="'1'"
                  :false-value="'0'"
                  size="large"
                />
              </ElFormItem>
            </template>
          </ElTableColumn>
        </ElTable>
      </ElTabPane>
      <ElTabPane label="页面配置">
        <ElTable
          v-show="!dataLoadFlag"
          ref="singleTableRef"
          highlight-current-row
          :data="formSchema.fieldList"
          header-row-class-name="table-background"
          style="width: 100%; height: 600px; margin-top: 20px"
          :border="true"
        >
          <ElTableColumn
            label="序号"
            type="index"
            width="70"
            align="center"
            :sortable="true"
            :sort-method="sortOrder"
          />
          <ElTableColumn prop="fieldName" label="名称">
            <template #default="scope">
              <ElFormItem :prop="`fieldList[${scope.$index}].fieldName`">
                <ElInput
                  :disabled="true"
                  @blur="triggerValidation(scope.$index)"
                  v-model="scope.row.fieldName"
                  placeholder=""
                />
              </ElFormItem>
            </template>
          </ElTableColumn>
          <ElTableColumn prop="remarks" label="备注">
            <template #default="scope">
              <ElFormItem :prop="`fieldList[${scope.$index}].remarks`">
                <ElInput :disabled="true" v-model="scope.row.remarks" placeholder="" />
              </ElFormItem>
            </template>
          </ElTableColumn>
          <ElTableColumn prop="searchModule" label="查询组件">
            <template #default="scope">
              <ElFormItem :prop="`fieldList[${scope.$index}].searchModule`">
                <ElSelect
                  :disabled="verifyDisabled(scope.row)"
                  v-model="scope.row.searchModule"
                  placeholder="Select"
                  size="large"
                >
                  <ElOption
                    v-for="item in formModuleOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </ElSelect>
              </ElFormItem>
            </template>
          </ElTableColumn>
          <ElTableColumn prop="isQuery" label="是否为查询条件">
            <template #default="scope">
              <ElFormItem :prop="`fieldList[${scope.$index}].isQuery`">
                <ElCheckbox
                  :disabled="verifyDisabled(scope.row)"
                  v-model="scope.row.isQuery"
                  :true-value="'1'"
                  :false-value="'0'"
                  size="large"
                />
              </ElFormItem>
            </template>
          </ElTableColumn>
          <ElTableColumn prop="isShow" label="是否展示字段">
            <template #default="scope">
              <ElFormItem :prop="`fieldList[${scope.$index}].isShow`">
                <ElCheckbox
                  :disabled="verifyDisabled(scope.row)"
                  v-model="scope.row.isShow"
                  :true-value="'1'"
                  :false-value="'0'"
                  size="large"
                />
              </ElFormItem>
            </template>
          </ElTableColumn>
        </ElTable>
      </ElTabPane>
    </ElTabs>
  </ElForm>
  <Dialog v-model="moduleVisible" title="配置">
    <SelectOption :current-row="selectRow" />
    <template #footer>
      <ElButton type="primary" @click="saveModule">确定</ElButton>
      <ElButton @click="moduleVisible = false">取消</ElButton>
    </template>
  </Dialog>
</template>
<style>
.el-table--border th.el-table__cell {
  background: var(--el-fill-color-light);
}

/* .el-form-item__content {
  justify-content: center;
} */
</style>
